<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Choices
      <span *ngIf="(gameService.player$ | async) as player">
        ({{ (gameService.choices$ | async)?.length || 0 }}/{{ player?.$choicesData?.size }})
      </span>
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ng-container *ngIf="(gameService.choices$ | async) as choices">
    <div class="blank-slate" *ngIf="!choices?.length">
      You have no choices to make.
    </div>

    <ion-list>
      <ion-item *ngFor="let item of choices; let i = index">
        <ion-grid>
          <ion-row>
            <ion-col>
              <ion-label class="ion-text-wrap">
                <h3>Choice {{ i + 1 }}/{{ choices.length }}</h3>
                <p><em>{{ item.foundAt | date:'medium' }}</em></p>
                <p>{{ item.desc }}</p>
              </ion-label>
            </ion-col>
          </ion-row>
  
          <ion-row class="ion-flex-wrap">
            <ion-col *ngFor="let choice of item.choices" size-md="3" size-sm="6">
              <ion-button [color]="choice === item.defaultChoice ? 'primary' : 'secondary'" 
                          expand="block"
                          (click)="choose(item, choice)">
                {{ choice }}
              </ion-button>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-item>
    </ion-list>
  </ng-container>
</ion-content>
